<template>
  <div class="create-resource-layout">
    <!-- 左侧标签栏 -->
    <div class="sidebar">
      <a-menu
        v-model:selectedKeys="selectedKeys"
        mode="inline"
        @click="handleMenuClick"
        class="create-menu"
      >
        <a-menu-item key="image-upload">
          <template #icon>
            <PictureOutlined />
          </template>
          图片上传
        </a-menu-item>
        <a-menu-item key="video-upload">
          <template #icon>
            <VideoCameraOutlined />
              </template>
          视频上传
        </a-menu-item>
        <a-menu-item key="upload-history">
          <template #icon>
            <HistoryOutlined />
              </template>
          上传历史
        </a-menu-item>
      </a-menu>
            </div>

    <!-- 右侧内容区域 -->
    <div class="content-area">
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  PictureOutlined,
  VideoCameraOutlined,
  HistoryOutlined,
} from '@ant-design/icons-vue'

const route = useRoute()
const router = useRouter()

// 当前选中的菜单项
const selectedKeys = computed(() => {
  const path = route.path
  if (path.includes('/image-upload')) return ['image-upload']
  if (path.includes('/video-upload')) return ['video-upload']
  if (path.includes('/upload-history')) return ['upload-history']
  return ['image-upload']
})

// 处理菜单点击
const handleMenuClick = ({ key }: { key: string }) => {
  router.push(`/user/createSource/${key}`)
}

onMounted(() => {
  // 如果当前路径是根路径，重定向到图片上传页面
  if (route.path === '/user/createSource') {
    router.push('/user/createSource/image-upload')
  }
})

defineExpose({})
</script>

<style scoped>
.create-resource-layout {
  display: flex;
  min-height: 100vh;
  background: var(--theme-background);
  transition: all 0.3s ease;
}

.sidebar {
  width: 260px;
  background: var(--theme-surface);
  border-right: 1px solid var(--theme-border);
  padding: 0;
  position: fixed;
  left: 0;
  top: 64px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: all 0.3s ease;
}

.create-menu {
  flex: 1;
  border-right: none;
  margin-top: 12px;
}

.content-area {
  flex: 1;
  margin-left: 260px;
  padding: 0;
  min-height: calc(100vh - 64px);
  width: calc(100vw - 260px);
  background: var(--theme-background);
  transition: all 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .create-resource-layout {
    flex-direction: column;
}

  .sidebar {
    width: 100%;
    position: relative;
    top: 0;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
}

  .content-area {
    margin-left: 0;
    padding: 12px;
  }
}
</style>
